<template>
  <div class="page-view">
    <div class="header-box">
      <div class="header" :style="{ backgroundColor: bgColor }">
        <span class="status">{{ _filterStatus() }}</span>
        <span class="time">{{ detail.createDate }}</span>
      </div>
      <div>
        <img class="header-icon" :style="iconRight" :src="Background" alt="" />
      </div>
    </div>

    <div class="body">
      <div class="rounded-10px bg-white">
        <div class="cell-item">
          <div class="item_label">申请类型</div>
          <div class="item_value">外出{{ labelPrefix }}</div>
        </div>

        <div v-if="detail.outTimeBegin && detail.outTimeEnd" class="cell-item">
          <div class="item_label">{{ labelPrefix }}时间</div>
          <div class="item_value">
            {{ detail.outTimeBegin }} 至 {{ detail.outTimeEnd }}
          </div>
        </div>

        <div class="cell-item" v-if="!isSweep">
          <div class="item_label">{{ labelPrefix }}商机</div>
          <div class="item_value">{{ detail.businessOpportunityName }}</div>
        </div>

        <div class="cell-item">
          <div class="item_label">{{ labelPrefix }}地址</div>
          <div class="item_value">{{ detail.address }}</div>
        </div>

        <div v-if="detail.clockOnTime" class="cell-item">
          <div class="item_label">签到</div>
          <div class="item_value_clock">
            <div class="mb-8px flex justify-between items-center">
              <span>{{ detail.clockOnTime }}</span>
            </div>
            <div class="leading-16px">
              {{ detail.clockOnAddress }}
            </div>
          </div>
        </div>

        <div v-if="detail.clockOutTime" class="cell-item">
          <div class="item_label">签出</div>
          <div
            class="item_value_clock"
            :class="{ warning: detail.clockOutStatus === 20 }"
          >
            <div class="mb-8px flex justify-between items-center">
              <span>{{ detail.clockOutTime }}</span>
              <Tag
                v-if="detail.clockOutStatus === 20"
                type="warning"
                plain
                class="!px-8px !py-3px"
                :style="{
                  borderColor: '#f55f4e',
                  color: '#f55f4e',
                  background: '#FFE6E6',
                }"
              >
                异地
              </Tag>
            </div>
            <div class="leading-16px">
              {{ detail.clockOutAddress }}
            </div>
          </div>
        </div>

        <div class="cell-item" v-if="isSweep && detail.opportunityList">
          <div class="item_label">{{ labelPrefix }}成果</div>
          <div
            v-if="detail.opportunityList && detail.opportunityList.length"
            class="item_value_clock"
          >
            <div
              v-for="(item, index) in detail.opportunityList"
              :key="index"
              class="flex items-start mb-12px"
            >
              <span
                class="bg-black w-15px h-15px text-white rounded-1 p-3px mr-6px flex items-center justify-center"
              >
                {{ index + 1 }}
              </span>
              <span class="leading-16px flex-1">
                {{ item }}
              </span>
            </div>
          </div>
          <div v-else class="item_value">{{ detail.canvassedResult }}</div>
        </div>

        <div v-if="!isSweep && detail.kpName" class="cell-item">
          <div class="item_label">{{ labelPrefix }}KP</div>
          <div class="item_value">
            {{ detail.kpName }}-{{ detail.kpPosition }}-{{ detail.kpPhone }}
          </div>
        </div>

        <div v-if="detail.lastFollowUpStatus" class="cell-item">
          <div class="item_label">跟进状态</div>
          <div class="item_value">
            {{
              ["无合作意向", "有合作意向", "未达成合作意向", "达成签约意向"][
                detail.lastFollowUpStatus - 1
              ]
            }}
          </div>
        </div>

        <div v-if="detail.content" class="cell-item">
          <div class="item_label">{{ labelPrefix }}内容</div>
          <div class="item_value">{{ detail.content }}</div>
        </div>

        <div v-if="detail.followUpResult" class="cell-item">
          <div class="item_label">{{ labelPrefix }}结果</div>
          <div class="item_value">{{ detail.followUpResult }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { TODO_TYPE, TODO_STATUS } from "@/constants";
import { Tag, Toast } from "vant";
import { fetchTodoDetail } from "@/services";
export default {
  inject: ["navBgColor"],
  components: {
    Tag,
  },
  data() {
    return {
      detail: {
        opportunityList: [],
      },
      loading: true,
    };
  },
  computed: {
    labelPrefix() {
      const { type } = this.$route.query;
      if (type) {
        const [typeObj] = TODO_TYPE.filter(({ key }) => key == type);
        return typeObj.text;
      } else {
        return "拜访";
      }
    },
    isSweep() {
      return this.$route.query.type == "3";
    },
    bgColor() {
      // 已驳回 #F55F4E 已完成 #57AE59 其他 #1D6FE9
      const statusInt = Number(this.$route.query.status);
      return statusInt === 30
        ? "#F55F4E "
        : statusInt === 60
        ? "#57AE59 "
        : "#1D6FE9";
    },
    Background() {
      // 已驳回 #F55F4E 已完成 #57AE59 其他 #1D6FE9
      const statusInt = Number(this.$route.query.status);
      return statusInt === 30
        ? require("@/assets/workbench/view/view-close.png")
        : statusInt === 60
        ? require("@/assets/workbench/view/view-success.png")
        : require("@/assets/workbench/view/view-wait.png");
    },
    iconRight() {
      // 已驳回 #F55F4E 已完成 #57AE59 其他 #1D6FE9
      const statusInt = Number(this.$route.query.status);
      return statusInt === 30
        ? "right: 38px"
        : statusInt === 60
        ? "right: 31px"
        : "right: 31px";
    },
  },
  created() {
    this._setNavBgColor();
    this.handleApplyViews();
  },
  mounted() {
    this.detailHeaderBar();
  },
  methods: {
    detailHeaderBar() {
      let tempDom = document.querySelector(
        ".van-nav-bar .van-nav-bar__content"
      );
      tempDom.className = "van-nav-bar__content set__nav__bar__bg";
    },
    async handleApplyViews() {
      try {
        const result = await fetchTodoDetail({ todoId: this.$route.query.id });
        this.detail = result || {};
      } catch (error) {
        Toast("获取详情失败");
      }
    },
    _filterStatus() {
      const [statusItem] = TODO_STATUS.filter(
        ({ key }) => key === Number(this.$route.query.status)
      );
      return statusItem.text;
    },
    /**
     * 设置导航栏背景色
     */
    _setNavBgColor() {
      this.$nextTick(() => {
        this.navBgColor.color = this.bgColor;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-view {
  @apply flex flex-col;
  .header-box {
    position: relative;
    .header-icon {
      position: absolute;
      top: 0px;
      width: 76px;
      height: 76px;
    }
  }
  .header {
    @apply flex flex-col pt-10px px-20px pb-21px;
    color: #ffffff;
    .status {
      @apply text-24px font-500 leading-33px;
    }
    .time {
      margin-top: 6px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #fff;
      font-size: 12px;
      opacity: 0.5;
    }
  }
  .body {
    @apply flex-1 overflow-auto p-10px;
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
    .cell-item {
      @apply px-12px py-16px;
      box-shadow: inset 0px -1px 0px 0px #eeeeee;
      &:last-child {
        border-style: none;
        box-shadow: none;
      }
      .item_label {
        color: #999999;
        @apply text-12px font-400 mb-12px;
      }
      .item_value {
        word-break: break-all;
        color: #333333;
        @apply text-14px font-500;
      }
      .item_value_clock {
        @apply text-12px px-12px py-11px rounded-8px flex flex-col mb-8px;
        &:last-child {
          @apply mb-0;
        }
        background-color: #f3f8fe;
        color: #333333;
        &.warning {
          background-color: #fef7f6;
        }
      }
    }
  }
}
</style>
